<script type="text/javascript">
function deleteApp() {
	var appId = $(this).parent().attr('data-app-id');
    $.ajax({
        url : basePath + '/appointment/ajaxDeleteApp/id/' + appId,
        type : 'get',
        success : function(data) {
            $('[data-app-id='+appId+']').remove();
        }
    });
}

function confirmApp(appId) {
	$.ajax({
	    url: basePath + '/appointment/ajaxConfirmApp/id/' + appId,
	    type : 'get',
	    success : function(data) {
            location.reload();
        },
        error : function(data) {
        	reportError(data);
        }
	});
}

$(document).ready(function(){

	$('#doctor').hide();

	$('#specs').change(function(){
		console.log($(this));
	    $.get(basePath+'/specialization/getDoctors/'+$(this).val(), 
    	    function(data){
	            var docs = "<option></option>";
	            $.each(data, function(key, value) {
	                docs += '<option value="'+key+'">'+value+'</option>';
	            });

	            $('#doctors').html(docs);
	            $('#doctor').show();
    	    }, 
    	    'json'
	    );
	});
	
	$('#doctors').change(function(){
		makeClientCalendar("clientCalendar", $(this).val());
		$('#cal').show();
	});
	
	makeClientCalendar("clientCalendar", null);
});

</script>

<div id="spec">
<h3>Choose your specialization!</h3>
<?php echo CHtml::dropDownList('specialization', ' ', Specialization::getAllForDropdown(), array('id' => 'specs')); ?>
</div>


<div id="doctor">
<h3>Choose your Doctor!</h3>
<?php echo CHtml::dropDownList('doctor', ' ', $doctors, array('id' => 'doctors')); ?>
</div>
<div id="cal">
<h3>Drag your appointment to the work time of a doctor</h3>
<div id="oneHour" class="dragger" data-hours="1">Drag me!</div>
</div>
<div id="calendarOverlay"></div>
<div id="clientCalendar"></div>
